<template>
	<baseDialog ref="dialogRef" :title="dialogTitle" width="600px" :isFullscreen="true" :showFooter="false" @confirm="" @close="handleClose">
		<el-card class="layout-search-card mb-4" shadow="never" :body-style="{ paddingBottom: '0' }">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item label="数据名称：">
					<el-input v-model="state.queryParams.name" placeholder="请输入数据名称" class="w-180"> </el-input>
				</el-form-item>
				<el-form-item label="数据值：">
					<el-input v-model="state.queryParams.value" placeholder="请输入数据值" class="w-180"> </el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-select class="w-[150px]" v-model="state.queryParams.status">
						<el-option label="全部" value="" />
						<el-option label="正常" value="1" />
						<el-option label="停用" value="0" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="searchTable"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="tableResetQuery" class="ml15"> 重置 </el-button>
					</el-button-group>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="layout-table-card" shadow="never">
			<el-button type="primary" v-auth="'sys/dictData/add'" class="mb-4" @click="handleAddDict()"> 添加数据 </el-button>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column prop="id" label="ID" width="60" />
				<el-table-column prop="name" label="数据名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="value" label="数据值" show-overflow-tooltip></el-table-column>
				<el-table-column prop="status" label="状态" show-overflow-tooltip>
					<template #default="{ row }">
						<el-tag type="success" v-if="row.status">{{ row.status_desc }}</el-tag>
						<el-tag type="danger" v-else>{{ row.status_desc }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="create_time" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="200" fixed="right">
					<template #default="{ row }">
						<el-button size="small" v-auth="'sys/dictData/edit'" text type="primary" @click="handleEditDict(row)">编辑</el-button>
						<el-button size="small" v-auth="'sys/dictData/delete'" text type="primary" @click="handleDelDict(row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="state" @tableChange="getTableList" />
			</div>
		</el-card>
		<dataEdit v-if="showDialog" ref="dataDialogRef" @submit="getTableList()" @close="showDialog = false" />
	</baseDialog>
</template>

<script setup lang="ts" name="dictDataIndex">
import { ref, reactive, computed, nextTick } from 'vue';
import { messageBox } from '/@/utils/message';
import { dataLists, dataDelete } from '/@/api/dict/data';
import { usePage } from '/@/hooks/usePage';
import dataEdit from '/@/views/sys/dict/component/dataEdit.vue';

const dialogRef = ref(null);

const dialogType = ref('detail');

const dialogTitle = computed(() => {
	return '字典数据详情';
});

const emit = defineEmits(['submit', 'close']);

const dataDialogRef = ref();

const showDialog = ref(false);

// 定义列表
const state = reactive<TableDataState>({
	loading: false,
	tableList: [],
	queryParams: {
		type_id: 0,
	},
	tableParams: {
		page_num: 1,
		page_limit: 15,
		page_total: 0 as any,
	},
});

const { getTableList, searchTable, resetQuery } = usePage({ tableData: state, apiData: dataLists });

const tableResetQuery = async () => {
	state.queryParams = {type_id: state.queryParams.type_id}
	getTableList();
}

// 添加数据
const handleAddDict = async () => {
	showDialog.value = true;
	nextTick(() => {
		dataDialogRef.value?.setFormPid(state.queryParams.type_id);
		dataDialogRef.value?.open('add');
	});
};

// 编辑数据
const handleEditDict = async (row: any) => {
	showDialog.value = true;
	nextTick(() => {
		dataDialogRef.value?.setFormData(row, () => {
			dataDialogRef.value?.open('edit');
		});
	});
};

// 删除数据
const handleDelDict = async (id: number) => {
	messageBox(`确定要删除数据吗？`).then(async () => {
		await dataDelete({ id: id });
		getTableList();
	});
};

const setFormData = async (row: any, callback: any) => {
	state.queryParams.type_id = row.id;
	getTableList();
	callback();
};

const handleClose = () => {
	emit('close');
};

const open = (type = 'detail') => {
	dialogType.value = type;
	dialogRef.value?.open();
};

defineExpose({
	open,
	setFormData,
});
</script>
